<template>
  <div class="app-container" style="padding: 5px;">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="粉丝转化概览" name="first">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="80px" label-position="right">
          <el-form-item label="年月周：" prop="mode">
            <el-radio-group v-model="queryParams.mode" size="small" @change="handleChange">
              <el-radio v-for="(item, index) in modeList" :key="index" :label="item.value" border>{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="年份：" prop="year">
            <el-radio-group v-model="queryParams.year" size="small" @change="handleChange">
              <el-radio v-for="(item, index) in yearList" :label="item.value" :key="index" border>{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <el-row>
          <el-col :span="12">
            <el-card>
              <div slot="header" class="clearfix">
                <center><span style="font-weight: bold;color: #0099ff;font-size: 16px;">平台分类</span></center>
              </div>
              <div ref="chart1" style="width: 100%;height: 330px;margin-top: 5px;"></div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card>
              <div slot="header" class="clearfix">
                <center><span style="font-weight: bold;color: #0099ff;font-size: 16px;">销售总金额</span></center>
              </div>
              <div ref="chart2" style="width: 100%;height: 330px;margin-top: 5px;"></div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card>
              <div slot="header" class="clearfix">
                <center><span style="font-weight: bold;color: #0099ff;font-size: 16px;">销售人均金额</span></center>
              </div>
              <div ref="chart3" style="width: 100%;height: 330px;margin-top: 5px;"></div>
            </el-card>
          </el-col>
        </el-row>
        <el-row style="margin-top: 5px;">
          <el-col :span="6">
            <el-card>
              <div slot="header" class="clearfix">
                <center><span style="font-weight: bold;color: #0099ff;font-size: 16px;">后续付费总金额</span></center>
              </div>
              <div ref="chart4" style="width: 100%;height: 330px;margin-top: 5px;"></div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card>
              <div slot="header" class="clearfix">
                <center><span style="font-weight: bold;color: #0099ff;font-size: 16px;">后续付费人均金额</span></center>
              </div>
              <div ref="chart5" style="width: 100%;height: 330px;margin-top: 5px;"></div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card>
              <div slot="header" class="clearfix">
                <center><span style="font-weight: bold;color: #0099ff;font-size: 16px;">省内外区分</span></center>
              </div>
              <div ref="chart6" style="width: 100%;height: 330px;margin-top: 5px;"></div>
            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="粉丝转化增长人数、签单金额" name="second">
        <el-form :model="queryParams2" ref="queryForm2" size="small" :inline="true" label-width="100px" label-position="right">
          <el-form-item label="年月周：" prop="mode">
            <el-radio-group v-model="queryParams2.mode" size="small" @change="handleChange2p">
              <el-radio v-for="(item, index) in modeList" :key="index" :label="item.value" border>{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="开始年份：" prop="startYear" v-if="queryParams2.mode=='y'">
            <el-date-picker v-model="queryParams2.startYear" type="year" placeholder="开始年份" value-format="yyyy" @change="handleChange2"></el-date-picker>
          </el-form-item>

          <el-form-item label="结束年份：" prop="endYear" v-if="queryParams2.mode=='y'">
            <el-date-picker v-model="queryParams2.endYear" type="year" placeholder="结束年份" value-format="yyyy" @change="handleChange2"></el-date-picker>
          </el-form-item>

          <el-form-item label="月份范围：" prop="monthRange" v-if="queryParams2.mode=='m'">
            <el-date-picker v-model="queryParams2.monthRange" type="monthrange" range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份" value-format="yyyy-MM" @change="handleChange2"></el-date-picker>
          </el-form-item>

          <el-form-item label="年周" prop="weekyear" v-if="queryParams2.mode=='w'">
            <el-radio-group v-model="queryParams2.weekyear" size="small" @change="handleChange2">
              <el-radio v-for="(item, index) in yearList" :label="item.value" :key="index" border>{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="平台名称：" prop="platform">
            <el-radio-group v-model="queryParams2.platform" size="small" @change="handleChange2">
              <el-radio v-for="(item, index) in platList" :label="item.value" :key="index" border>{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <el-card>
          <div slot="header" class="clearfix">
            <span style="font-weight: bold;color: #0099ff;font-size: 16px;">转化粉丝增长人数折线图</span>
          </div>
          <div ref="chart7" style="width: 100%;height: 325px;"></div>
        </el-card>
        <el-card style="margin-top: 5px;">
          <div slot="header" class="clearfix">
            <span style="font-weight: bold;color: #0099ff;font-size: 16px;">转化粉丝签单金额折线图</span>
          </div>
          <div ref="chart8" style="width: 100%;height: 325px;"></div>
        </el-card>
        <el-card style="margin-top: 5px;">
          <div slot="header" class="clearfix">
            <span style="font-weight: bold;color: #0099ff;font-size: 16px;">转化粉丝出库金额折线图(按出库时间)</span>
          </div>
          <div ref="chart9" style="width: 100%;height:400px;"></div>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="粉丝转化唤醒与新增" name="third">
        <el-form :model="queryParams1" ref="queryForm1" size="small" :inline="true" label-width="110px" label-position="right">
          <el-form-item label="年份：" prop="year">
            <el-radio-group v-model="queryParams1.year" size="small" @change="handleChange1">
              <el-radio v-for="(item, index) in yearList" :label="item.value" :key="index" border>{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="周：" prop="week">
            <el-select v-model="queryParams1.week" filterable @change="handleChange1">
              <el-option v-for="item in weekList" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="签单类型：" prop="ordertype">
            <el-radio-group v-model="queryParams1.ordertype" size="small" @change="handleChange1">
              <el-radio v-for="(item, index) in ordertypeList" :label="item.value" :key="index" border>{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="平台名称：" prop="platform">
            <el-radio-group v-model="queryParams1.platform" size="small" @change="handleChange1">
              <el-radio v-for="(item, index) in platList" :label="item.value" :key="index" border>{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="唤醒/新增：" prop="hxxz">
            <el-radio-group v-model="queryParams1.hxxz" size="small" @change="handleChange1">
              <el-radio v-for="(item, index) in hxxzList" :label="item.value" :key="index" border>{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <el-card>
          <div slot="header" class="clearfix">
            <span style="font-weight: bold;color: #0099ff;font-size: 16px;">转化粉丝出库金额折线图(按接单时间)</span>
          </div>
          <div ref="chart10" style="width: 100%;height: 500px;"></div>
        </el-card>

        <el-card style="margin-top: 5px;">
          <div slot="header" class="clearfix">
            <span style="font-weight: bold;color: #0099ff;font-size: 16px;">粉丝转化明细</span>
          </div>
          <el-table :data="hxxzDetailList" border stripe :span-method="rowSpanMethodhxmx">
            <el-table-column label="接单时间" align="center" prop="jd_w" width="150"></el-table-column>
            <el-table-column label="平台名称" align="center" prop="platform"></el-table-column>
            <el-table-column label="接单类型" align="center" prop="type1"></el-table-column>
            <el-table-column label="客户名称" align="center" prop="customer_name"></el-table-column>
            <el-table-column label="销售姓名" align="center" prop="sale_name"></el-table-column>
            <el-table-column label="唤醒/新增" align="center" prop="add_hg"></el-table-column>
            <el-table-column label="产品名称" align="center" prop="product_name"></el-table-column>
            <el-table-column label="签单日期" align="center" prop="qdrq" width="120"></el-table-column>
            <!-- <el-table-column label="合同编号" align="center" prop="ht_code" width="160"></el-table-column> -->
            <el-table-column label="预计出库时间" align="center" prop="pre_fh_date"></el-table-column>
            <el-table-column label="实际出库时间" align="center" prop="fh_date"></el-table-column>
            <el-table-column label="出库单号" align="center" prop="fh_number" width="160"></el-table-column>
            <el-table-column label="接单金额" align="center" prop="htmoney"></el-table-column>
            <el-table-column label="接单周合计金额" align="center" prop="wkhtmoney" width="120"></el-table-column>
            <el-table-column label="预计出库金额" align="center" prop="premoney"></el-table-column>
            <el-table-column label="实际出库金额" align="center" prop="fhmoney"></el-table-column>
          </el-table>
          <center>
            <el-button title="上一页" circle plain type="primary" style="margin-top: 5px;" :disabled="hxxzDetailList.length==0||queryParams1.pageNo==1" @click="showPre2"> << </el-button>
            <el-button title="下一页" circle plain type="primary" style="margin-top: 5px;margin-left: 10px;" :disabled="queryParams1.pageNo>=queryParams1.totalPage" @click="showNext2"> >> </el-button>
          </center>
        </el-card>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { listFszhDicts,listFszhPart1Summary,listFszhPart2Summary,listFszhPart3Summary,listYearWeeks } from "@/api/system/weekly/weeklydashboard";
import * as echarts from 'echarts';
export default {
    name: "Xmtfszh",
    data() {
        return {
          activeName: 'first',
          yearList: [],
          platList: [],
          ordertypeList: [],
          weekList: [],
          yearWeekList: [],
          hxxzDetailList: [],
          modeList: [
            {
                value:"y",
                label:"年"
            },
            {
                value:"m",
                label:"月"
            },
            {
                value:"w",
                label:"周"
            }
          ],
          hxxzList: [
            {
                value:"all",
                label:"(全部)"
            },
            {
                value:"唤醒",
                label:"唤醒"
            },
            {
                value:"新增",
                label:"新增"
            }
          ],
          queryParams: {
            mode: null,
            year: null,
          },
          queryParams2: {
            mode: null,
            startYear: null,
            endYear: null,
            startMonth: null,
            endMonth: null,
            weekyear: null,
            monthRange: [],
            platform: null,
          },
          queryParams1: {
            year: null,
            week: null,
            ordertype: null,
            platform: null,
            hxxz: null,
            pageNo:1,
            pageSize:10,
            totalPage:0
          },
          currentYear: null,
        }
    },
    created() {
      this.currentYear = new Date().getFullYear();
      this.getFszhDicts();
    },
    mounted(){

    },
    methods: {
      rowSpanMethodhxmx({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {
          if (rowIndex === 0 || this.hxxzDetailList[rowIndex - 1].jd_w !== row.jd_w) {
            // 计算连续相同 ID 的行数
            let rowspan = 1;
            while (rowIndex + rowspan < this.hxxzDetailList.length && this.hxxzDetailList[rowIndex + rowspan].jd_w === row.jd_w) {
                rowspan++;
            }
            return { rowspan, colspan: 1 };
          } else {
            return { rowspan: 0, colspan: 0 };
          }
        }
        if (columnIndex === 1) {
          if (rowIndex === 0 || this.hxxzDetailList[rowIndex - 1].platform !== row.platform) {
            // 计算连续相同 ID 的行数
            let rowspan = 1;
            while (rowIndex + rowspan < this.hxxzDetailList.length && this.hxxzDetailList[rowIndex + rowspan].platform === row.platform) {
                rowspan++;
            }
            return { rowspan, colspan: 1 };
          } else {
            return { rowspan: 0, colspan: 0 };
          }
        }
        if (columnIndex === 2) {
          if (rowIndex === 0 || this.hxxzDetailList[rowIndex - 1].type1 !== row.type1) {
            // 计算连续相同 ID 的行数
            let rowspan = 1;
            while (rowIndex + rowspan < this.hxxzDetailList.length && this.hxxzDetailList[rowIndex + rowspan].type1 === row.type1) {
                rowspan++;
            }
            return { rowspan, colspan: 1 };
          } else {
            return { rowspan: 0, colspan: 0 };
          }
        }
        if (columnIndex === 3) {
          if (rowIndex === 0 || this.hxxzDetailList[rowIndex - 1].customer_name !== row.customer_name) {
            // 计算连续相同 ID 的行数
            let rowspan = 1;
            while (rowIndex + rowspan < this.hxxzDetailList.length && this.hxxzDetailList[rowIndex + rowspan].customer_name === row.customer_name) {
                rowspan++;
            }
            return { rowspan, colspan: 1 };
          } else {
            return { rowspan: 0, colspan: 0 };
          }
        }
      },
      showPre2(){
        this.queryParams1.pageNo = this.queryParams1.pageNo-1;
        this.getPart2DataSummary();
      },
      showNext2(){
        this.queryParams1.pageNo = this.queryParams1.pageNo+1;
        this.getPart2DataSummary();
      },
      handleClick(tab, event){
        if(tab.index==1){
          this.queryParams2.mode = this.queryParams.mode;
          this.queryParams2.platform = "all";
          if(this.queryParams2.mode=='y'){
            this.queryParams2.startYear = Number(this.currentYear-5);
            this.queryParams2.endYear = this.currentYear;
          }else if(this.queryParams2.mode=='m'){
            this.queryParams2.monthRange = [Number(this.currentYear-1)+'-10', this.currentYear+'-10'];
          }else if(this.queryParams2.mode=='w'){
            this.queryParams2.weekyear = this.currentYear;
          }
          this.getPart3DataSummary();
        }else if(tab.index==2){
          this.queryParams1.year = this.queryParams.year;
          this.queryParams1.mode = this.queryParams.mode;
          this.queryParams1.platform = "all";
          this.queryParams1.ordertype = "all";
          this.queryParams1.hxxz = "all";
          this.queryParams1.week = "all";
          this.getPart2DataSummary();
        }
      },
      getFszhDicts(){
        listFszhDicts().then(res =>{
          this.yearList = res.data.years;
          this.platList = res.data.platforms;
          this.ordertypeList = res.data.ordertypes;
          this.queryParams.year = res.data.year;
          this.queryParams.mode = res.data.mode;
          let weekdata = {
            value:"all",
            label: "全部"
          }
          this.weekList.push(weekdata);
          for(let i=1;i<=53;i++){
            let data = {
              value:i+'wk',
              label: "第"+i+"周"
            }
            this.weekList.push(data);
          }
          this.getPart1DataSummary();
        })
      },
      getPart1DataSummary(){
        listFszhPart1Summary(this.queryParams).then(res =>{
          const chart1 = echarts.init(this.$refs.chart1);
          let labels1 = [];
          let colors1 = [];
          if(res.data.plats.length>0){
            for(let i=0;i<res.data.plats.length;i++){
              labels1.push(res.data.plats[i].platform);
              const randomHex = Math.floor(Math.random() * 0xffffff).toString(16).padStart(6, '0');
              colors1.push("#"+randomHex);
            }
          }
          const option1 = {
            tooltip: {
              trigger: 'axis',
              formatter: function (params) {
                return params[0].data.extraInfo
              }
            },
            grid: {
              left: '1%',
              right: '1%',
              bottom: '7%',
              containLabel: true
            },
            toolbox: {
              show: true,
              feature: {
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
              }
            },
            calculable: true,
            xAxis: [
              {
                type: 'category',
                data: labels1
              }
            ],
            yAxis: [
              {
                type: 'value'
              }
            ],
            series: [
              {
                type: 'bar',
                data: res.data.plats.map(item => ({
                    value: item.customers,
                    name: item.platform,
                    extraInfo: "平台："+item.platform+"<br/> 人数："+item.customers,
                    labelInfo: item.customers+"人"
                })),
                itemStyle: {
                    color: function(params) {
                        // 颜色数组
                        const colorList = colors1;
                        // 根据数据索引返回对应颜色
                        return colorList[params.dataIndex % colorList.length];
                    }
                },
                label: {
                    show: true, // 显示标签
                    position: 'top', // 标签位置
                    formatter: function (params) {
                      return params.data.labelInfo
                    }
                }
              }
            ]
          };
          chart1.setOption(option1);

          const chart2 = echarts.init(this.$refs.chart2);
          let labels2 = [];
          let colors2 = [];
          if(res.data.xszje.length>0){
            for(let i=0;i<res.data.xszje.length;i++){
              labels2.push(res.data.xszje[i].type1);
              const randomHex = Math.floor(Math.random() * 0xffffff).toString(16).padStart(6, '0');
              colors2.push("#"+randomHex);
            }
          }

          const option2 = {
            tooltip: {
              trigger: 'axis',
              formatter: function (params) {
                return params[0].data.extraInfo
              }
            },
            grid: {
              left: '1%',
              right: '1%',
              bottom: '7%',
              containLabel: true
            },
            toolbox: {
              show: true,
              feature: {
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
              }
            },
            calculable: true,
            xAxis: [
              {
                type: 'category',
                data: labels2
              }
            ],
            yAxis: [
              {
                type: 'value'
              }
            ],
            series: [
              {
                type: 'bar',
                data: res.data.xszje.map(item => ({
                    value: item.fee,
                    name: item.type1,
                    extraInfo: "签单类型："+item.type1+"<br/> 金额："+item.fee+"元",
                    labelInfo: item.fee+"元"
                })),
                itemStyle: {
                    color: function(params) {
                        // 颜色数组
                        const colorList = colors2;
                        // 根据数据索引返回对应颜色
                        return colorList[params.dataIndex % colorList.length];
                    }
                },
                label: {
                    show: true, // 显示标签
                    position: 'top', // 标签位置
                    formatter: function (params) {
                      return params.data.labelInfo
                    }
                }
              }
            ]
          };
          chart2.setOption(option2);

          const chart3 = echarts.init(this.$refs.chart3);
          let labels3 = [];
          let colors3 = [];
          if(res.data.xsrjje.length>0){
            for(let i=0;i<res.data.xsrjje.length;i++){
              labels3.push(res.data.xsrjje[i].type1);
              const randomHex = Math.floor(Math.random() * 0xffffff).toString(16).padStart(6, '0');
              colors3.push("#"+randomHex);
            }
          }

          const option3 = {
            tooltip: {
              trigger: 'axis',
              formatter: function (params) {
                return params[0].data.extraInfo
              }
            },
            grid: {
              left: '1%',
              right: '1%',
              bottom: '7%',
              containLabel: true
            },
            toolbox: {
              show: true,
              feature: {
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
              }
            },
            calculable: true,
            xAxis: [
              {
                type: 'category',
                data: labels3
              }
            ],
            yAxis: [
              {
                type: 'value'
              }
            ],
            series: [
              {
                type: 'bar',
                data: res.data.xsrjje.map(item => ({
                    value: item.fee,
                    name: item.type1,
                    extraInfo: "签单类型："+item.type1+"<br/> 金额："+Number(item.fee).toFixed(2)+"元",
                    labelInfo: Number(item.fee).toFixed(2)+"元/人"
                })),
                itemStyle: {
                  color: function(params) {
                    // 颜色数组
                    const colorList = colors3;
                    // 根据数据索引返回对应颜色
                    return colorList[params.dataIndex % colorList.length];
                  }
                },
                label: {
                    show: true, // 显示标签
                    position: 'top', // 标签位置
                    formatter: function (params) {
                      return params.data.labelInfo
                    }
                }
              }
            ]
          };
          chart3.setOption(option3);

          const chart4 = echarts.init(this.$refs.chart4);
          let labels4 = [];
          let colors4 = [];
          if(res.data.hxff.length>0){
            for(let i=0;i<res.data.hxff.length;i++){
              labels4.push("后续付费总金额");
              const randomHex = Math.floor(Math.random() * 0xffffff).toString(16).padStart(6, '0');
              colors4.push("#"+randomHex);
            }
          }
          const option4 = {
            tooltip: {
              trigger: 'axis',
              formatter: function (params) {
                return params[0].data.extraInfo
              }
            },
            grid: {
              left: '1%',
              right: '1%',
              bottom: '7%',
              containLabel: true
            },
            toolbox: {
              show: true,
              feature: {
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
              }
            },
            calculable: true,
            xAxis: [
              {
                type: 'category',
                data: labels4
              }
            ],
            yAxis: [
              {
                type: 'value'
              }
            ],
            series: [
              {
                type: 'bar',
                data: res.data.hxff.map(item => ({
                  value: Number(item.sumfee).toFixed(2),
                  name: "后续付费总金额",
                  extraInfo: "后续付费总金额: "+Number(item.sumfee).toFixed(2)+"元",
                  labelInfo: Number(item.sumfee).toFixed(2)+"元"
                })),
                itemStyle: {
                  color: function(params) {
                    // 颜色数组
                    const colorList = colors4;
                    // 根据数据索引返回对应颜色
                    return colorList[params.dataIndex % colorList.length];
                  }
                },
                label: {
                    show: true, // 显示标签
                    position: 'top', // 标签位置
                    formatter: function (params) {
                      return params.data.labelInfo
                    }
                }
              }
            ]
          };
          chart4.setOption(option4);

          const chart5 = echarts.init(this.$refs.chart5);
          let labels5 = [];
          let colors5 = [];
          if(res.data.hxff.length>0){
            for(let i=0;i<res.data.hxff.length;i++){
              labels5.push("人均后续付费");
              const randomHex = Math.floor(Math.random() * 0xffffff).toString(16).padStart(6, '0');
              colors5.push("#"+randomHex);
            }
          }

          const option5 = {
            tooltip: {
              trigger: 'axis',
              formatter: function (params) {
                return params[0].data.extraInfo
              }
            },
            grid: {
              left: '1%',
              right: '1%',
              bottom: '7%',
              containLabel: true
            },
            toolbox: {
              show: true,
              feature: {
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
              }
            },
            calculable: true,
            xAxis: [
              {
                type: 'category',
                data: labels5
              }
            ],
            yAxis: [
              {
                type: 'value'
              }
            ],
            series: [
              {
                type: 'bar',
                data: res.data.hxff.map(item => ({
                    value: Number(item.avgfee).toFixed(2),
                    name: "人均付费总金额",
                    extraInfo: "后续付费总金额: "+Number(item.avgfee).toFixed(2)+"元",
                    labelInfo: Number(item.avgfee).toFixed(2)+"元/人"
                })),
                itemStyle: {
                  color: function(params) {
                    // 颜色数组
                    const colorList = colors5;
                    // 根据数据索引返回对应颜色
                    return colorList[params.dataIndex % colorList.length];
                  }
                },
                label: {
                    show: true, // 显示标签
                    position: 'top', // 标签位置
                    formatter: function (params) {
                      return params.data.labelInfo
                    }
                }
              }
            ]
          };
          chart5.setOption(option5);

          const chart6 = echarts.init(this.$refs.chart6);
          let labels6 = [];
          let colors6 = [];
          if(res.data.region.length>0){
            for(let i=0;i<res.data.region.length;i++){
              labels6.push(res.data.region[i].region);
              const randomHex = Math.floor(Math.random() * 0xffffff).toString(16).padStart(6, '0');
              colors6.push("#"+randomHex);
            }
          }

          const option6 = {
            tooltip: {
              trigger: 'axis',
              formatter: function (params) {
                return params[0].data.extraInfo
              }
            },
            grid: {
              left: '1%',
              right: '1%',
              bottom: '7%',
              containLabel: true
            },
            toolbox: {
              show: true,
              feature: {
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
              }
            },
            calculable: true,
            xAxis: [
              {
                type: 'category',
                data: labels6
              }
            ],
            yAxis: [
              {
                type: 'value'
              }
            ],
            series: [
              {
                type: 'bar',
                data: res.data.region.map(item => ({
                    value: item.customers,
                    name: item.region,
                    extraInfo: item.region+" 转化粉丝数："+item.customers+"人",
                    labelInfo: item.customers+"人"
                })),
                itemStyle: {
                  color: function(params) {
                    // 颜色数组
                    const colorList = colors6;
                    // 根据数据索引返回对应颜色
                    return colorList[params.dataIndex % colorList.length];
                  }
                },
                label: {
                    show: true, // 显示标签
                    position: 'top', // 标签位置
                    formatter: function (params) {
                      return params.data.labelInfo
                    }
                }
              }
            ]
          };
          chart6.setOption(option6);
        })
      },
      getPart2DataSummary(){
        listFszhPart2Summary(this.queryParams1).then(res =>{
          this.hxxzDetailList = res.data.detail;
          this.queryParams1.totalPage = res.data.totalPage;
          this.queryParams1.pageNo = res.data.pageNo;
          this.queryParams1.pageSize = res.data.pageSize;
          let labels10 = [];
          if(res.data.summary.length>0){
            for(let i=0;i<res.data.summary.length;i++){
              labels10.push(res.data.summary[i].jd_w);
            }
          }
          const chart10 = echarts.init(this.$refs.chart10);
          const option10 = {
            legend: {
              data: ['接单金额', '预出库金额', '实际出库金额'],
              left: 'center'
            },
            toolbox: {
              feature: {
                magicType: {
                  type: ['stack']
                },
                dataView: {}
              }
            },
            tooltip: {
              formatter: function (params) {
                return params.data.extraInfo
              }
            },
            xAxis: {
              data: labels10,
              axisLabel: {
                rotate: 45, // 设置 X 轴文字旋转角度
                interval: 0, // 强制显示所有标签
                fontSize: 12, // 文字大小
                color: '#333' // 文字颜色
              }
            },
            yAxis: {},
            grid: {
              bottom: 100,
              left: 80,
              width: '95%'
            },
            series: [
              {
                name: '接单金额',
                type: 'bar',
                stack: 'one',
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowColor: 'rgba(0,0,0,0.3)'
                  }
                },
                itemStyle: {
                  color: 'red', // 设置柱子的填充颜色为红色
                },
                data: res.data.summary.map(item => ({
                  value: item.jdfee,
                  name: item.jd_w,
                  extraInfo: "接单日期："+item.jd_w+"<br /><span style='color:red;'>接单金额："+item.jdfee+"元</span><br/><span style='color:#F28E2B;'>预出库金额: "+item.yckfee+"元</span><br /><span style='color:#4E79A7;'>实际出库金额: "+item.sjckfee+"元</span>",
                })),
              },
              {
                name: '预出库金额',
                type: 'bar',
                stack: 'one',
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowColor: 'rgba(0,0,0,0.3)'
                  }
                },
                itemStyle: {
                  color: '#F28E2B', // 设置柱子的填充颜色为红色
                },
                data: res.data.summary.map(item => ({
                  value: item.yckfee,
                  name: item.jd_w,
                  extraInfo: "接单日期："+item.jd_w+"<br /><span style='color:red;'>接单金额："+item.jdfee+"元</span><br/><span style='color:#F28E2B;'>预出库金额: "+item.yckfee+"元</span><br /><span style='color:#4E79A7;'>实际出库金额: "+item.sjckfee+"元</span>",
                })),
              },
              {
                name: '实际出库金额',
                type: 'bar',
                stack: 'one',
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowColor: 'rgba(0,0,0,0.3)'
                  }
                },
                itemStyle: {
                  color: '#4E79A7', // 设置柱子的填充颜色为红色
                },
                data: res.data.summary.map(item => ({
                  value: item.sjckfee,
                  name: item.jd_w,
                  extraInfo: "接单日期："+item.jd_w+"<br /><span style='color:red;'>接单金额："+item.jdfee+"元</span><br/><span style='color:#F28E2B;'>预出库金额: "+item.yckfee+"元</span><br /><span style='color:#4E79A7;'>实际出库金额: "+item.sjckfee+"元</span>",
                })),
              }
            ]
          };
          chart10.setOption(option10);
        })
      },
      getPart3DataSummary(){
        if(this.queryParams2.mode=='y'){
          if(Number(this.queryParams2.startYear)>Number(this.queryParams2.end)){
            this.$message.error('开始年份不能晚于结束年份');
            this.queryParams2.startYear = ""+Number(this.currentYear-5);
            this.queryParams2.endYear = ""+this.currentYear;
          }
        }
        this.queryParams2.startMonth = this.queryParams2.monthRange[0];
        this.queryParams2.endMonth = this.queryParams2.monthRange[1];
        listFszhPart3Summary(this.queryParams2).then(res =>{
          console.log(res.data)
          const chart7 = echarts.init(this.$refs.chart7);
          let labels7 = [];
          if(res.data.fszz.length>0){
            for(let i=0;i<res.data.fszz.length;i++){
              labels7.push(res.data.fszz[i].seldate);
            }
          }
          let fszztitle = "";
          if(this.queryParams2.platform=="all"){
            fszztitle = "全平台";
          }else{
            fszztitle = this.queryParams2.platform;
          }
          const option7 = {
            title: {
              text: fszztitle,
              textStyle: {
                fontSize: 12, // 设置标题字体大小
                fontWeight: 'bold', // 设置字体粗细
              },
              left: 'left'
            },
            tooltip: {
              trigger: 'axis',
              formatter: function (params) {
                return params[0].data.extraInfo
              }
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            toolbox: {
              show: true,
              feature: {
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
              }
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: labels7,
              axisLabel: {
                rotate: 45, // 设置 X 轴文字旋转角度
                interval: 0, // 强制显示所有标签
                fontSize: 12, // 文字大小
                color: '#333' // 文字颜色
              }
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                type: 'line',
                label: {
                  show: true, // 显示标签
                  position: 'top', // 标签位置
                  formatter: '{c}人' // 标签内容格式化为数据值
                },
                data: res.data.fszz.map(item => ({
                  value: item.customers,
                  name: item.seldate,
                  extraInfo: "时间: "+item.seldate+"<br />平台: "+fszztitle+"<br />粉丝增长数: "+item.customers+"人"
                })),
              }
            ]
          };
          chart7.setOption(option7);

          const chart8 = echarts.init(this.$refs.chart8);
          let labels8 = [];
          if(res.data.qdje.length>0){
            for(let i=0;i<res.data.qdje.length;i++){
              labels8.push(res.data.qdje[i].seldate);
            }
          }
          const option8 = {
            title: {
              text: fszztitle,
              textStyle: {
                fontSize: 12, // 设置标题字体大小
                fontWeight: 'bold', // 设置字体粗细
              },
              left: 'left'
            },
            tooltip: {
              trigger: 'axis',
              formatter: function (params) {
                return params[0].data.extraInfo
              }
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            toolbox: {
              show: true,
              feature: {
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
              }
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: labels8,
              axisLabel: {
                rotate: 45, // 设置 X 轴文字旋转角度
                interval: 0, // 强制显示所有标签
                fontSize: 12, // 文字大小
                color: '#333' // 文字颜色
              }
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                type: 'line',
                label: {
                  show: true, // 显示标签
                  position: 'top', // 标签位置
                  formatter: '{c}元' // 标签内容格式化为数据值
                },
                data: res.data.qdje.map(item => ({
                  value: item.fee,
                  name: item.seldate,
                  extraInfo: "时间: "+item.seldate+"<br />平台: "+fszztitle+"<br />金额: "+item.fee+"元"
                })),
                itemStyle: {
                  color: 'orange', // 设置柱子的填充颜色为红色
                },
              }
            ]
          };
          chart8.setOption(option8);

          const chart9 = echarts.init(this.$refs.chart9);
          let labels9 = [];
          if(res.data.ckje.length>0){
            for(let i=0;i<res.data.ckje.length;i++){
              labels9.push(res.data.ckje[i].seldate);
            }
          }
          const option9 = {
            title: {
              text: fszztitle,
              textStyle: {
                fontSize: 12, // 设置标题字体大小
                fontWeight: 'bold', // 设置字体粗细
              },
              left: 'left'
            },
            tooltip: {
              trigger: 'axis',
              formatter: function (params) {
                return params[0].data.extraInfo
              }
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            toolbox: {
              show: true,
              feature: {
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
              }
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: labels9,
              axisLabel: {
                rotate: 45, // 设置 X 轴文字旋转角度
                interval: 0, // 强制显示所有标签
                fontSize: 12, // 文字大小
                color: '#333' // 文字颜色
              }
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                type: 'line',
                label: {
                  show: true, // 显示标签
                  position: 'top', // 标签位置
                  formatter: '{c}元' // 标签内容格式化为数据值
                },
                data: res.data.ckje.map(item => ({
                  value: item.fee,
                  name: item.seldate,
                  extraInfo: "时间: "+item.seldate+"<br />平台: "+fszztitle+"<br />出库金额: "+item.fee+"元"
                })),
                itemStyle: {
                  color: 'red', // 设置柱子的填充颜色为红色
                },
              }
            ]
          };
          chart9.setOption(option9);
        })
      },
      handleChange(){
        this.getPart1DataSummary();
      },
      handleChange1(){
        this.getPart2DataSummary();
      },
      handleChange2p(){
        this.queryParams2.platform = "all";
        if(this.queryParams2.mode=='y'){
          this.queryParams2.startYear = ""+Number(this.currentYear-5);
          this.queryParams2.endYear = ""+this.currentYear;
        }else if(this.queryParams2.mode=='m'){
          this.queryParams2.monthRange = [Number(this.currentYear-1)+'-10', this.currentYear+'-10'];
        }else if(this.queryParams2.mode=='w'){
          this.queryParams2.weekyear = ""+this.currentYear;
        }
        this.getPart3DataSummary();
      },
      handleChange2(){
        this.getPart3DataSummary();
      },
    }
}
</script>
